<template>
  <u-popup :modelValue="show" mode="bottom" border-radius="30" height="720" closeable close-icon-size="24"
    @close="emit('close')">
    <view class="relative">
      <view class="text-32 c-#333 text-center py-3 bg-white z-2">选择擅长领域</view>
      <view v-if="list && list.length > 0" class="pb-20">
        <view v-for="(item, index) in list" :key="index" class="flex items-center px-4 py-1" @click="onItemClick(item)">
          <view class="flex-shrink-0">
            <u-checkbox :modelValue="item.selected" shape="circle" active-color="#F4AF22" />
          </view>
          <view class="flex-1 text-28 c-#333">{{ item.expertise_name }}</view>
        </view>
      </view>
      <view class="bottom-wrap-16 px-4 bg-white">
        <view class="bg-#F4AF22 rounded-md c-#fff h-68 text-28 flex justify-center items-center" @click="onConfirm">
          确认
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import { getExpertiseList } from '@/common/http/module/common'

const emit = defineEmits(['close', 'confirm'])
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  data: Array
})

const list = ref([])

watch(() => props.data, val => {
  if (!val) return
  reFillSelect()
})

function loadData() {
  getExpertiseList().then(res => {
    list.value = res.data
    reFillSelect()
  })
}

function reFillSelect() {
  props.data?.forEach(selectedItem => {
    const listItem = list.value.find(item => item.id == selectedItem.id)
    if (listItem) {
      listItem.selected = true
    }
  })
}

function onItemClick(item) {
  item.selected = item.selected ? false : true
}

function onConfirm() {
  const selectedList = list.value.filter((item) => item.selected);
  if (selectedList && selectedList.length > 0) {
    emit('confirm', selectedList);
    emit('close');
  }
}

onMounted(() => loadData())
</script>

<style lang="scss" scoped>
.u-picker-header {
  display: flex;
  width: 100%;
  height: 90rpx;
  padding: 0 40rpx;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 30rpx;
  background: #fff;
  position: relative;
}

.u-picker-header::after {
  content: '';
  position: absolute;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}


.u-btn-picker {
  padding: 16rpx;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.u-opacity {
  opacity: 0.5;
}

.u-btn-picker--primary {
  color: #FF6720;
}
</style>